<template>
  <div class="count">
    <!-- 下方统计面板 -->
    <PagePanel panelTitle="近半月服务接口调用数据统计" @clickClose="clickClose">
      <div id="service"></div>
    </PagePanel>
  </div>
</template>

<script>
import * as echarts from "echarts";
import PagePanel from "@/components/PagePanel";
import LittleTitle from "@/components/LittleTitle";
import { statistic_l1, statistic_l2, statistic_l3 } from "@/api/stat.js";

export default {
  name: "CountAnalyse",
  components: { PagePanel, LittleTitle },
  data() {
    return {};
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      this.initTotalEchart();
    },
    formatDate(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    initTotalEchart() {
      let day = 15;
      let dateArr = new Array(day).fill(undefined);
      let dateCountArr = new Array(day).fill(undefined);

      const dataCount = dateCountArr.map((item) => {
        return (item = 50 + Math.floor(100 * Math.random()));
      });

      const date = dateArr.map((item, index) => {
        //获取当前日期
        let today = new Date();
        //获取前几天的日期
        let yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000 * index);
        //输出前一天的年月日
        return (item = this.formatDate(yesterday));
      });
      var myChart = echarts.init(document.getElementById("service"));
      // 绘制图表
      myChart.setOption({
        // backgroundColor: '#409eff20', //'#00176320',
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: false,
          data: date.reverse(),
        },
        yAxis: {
          name: "调用次数",
          type: "value",
        },
        series: [
          {
            name: "调用次数",
            type: "line",
            stack: "Total",
            data: dataCount,
          },
        ],
      });
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped>
.count {
  position: absolute;
  left: 460px;
  bottom: 44px;
  width: calc(100% - 900px);
  height: 420px;
  // background-color: blue;
  ::v-deep .page-panel {
    width: 100%;
    height: 100%;
    .content {
      height: calc(100% - 46px);
      overflow: auto;
    }
  }
}

#service {
  width: 900px;
  height: 350px;
}
</style>
